<template>
  <div id="board-content">
    <div class="content-one">
      <el-date-picker
        v-model="valueDate"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder=" 开始日期 "
        end-placeholder=" 结束日期 "
        @change="dateflush"
        :picker-options="disableDate">
      </el-date-picker>
      <div class="rf">
        <p class="time rf">查询时间&nbsp;:&nbsp;{{ time }}</p>
      </div>
    </div>
    <!--指标看板-->
    <div class="container-fluid">
      <ul v-for="(item, index) in items" :key="item.id"
          class="div_list float-left" @mouseenter="show(index)" @mouseleave="hide(index)" @click="elmboard(index)"
          :class="[{ active: index === elmborder }, 'loading' + index]" v-dragging="{ item: item, list: items, group: 'item' }">
        <!--删除按钮-->
        <button type="button" v-show="showList[index]" class="amelita-btn" @click.stop="remove(item)">
          <i class="iconfont">&#xe63f;</i>
        </button>
        <li class="databoard">
          <div class="font-size12 db-title">{{item.kanban_elem_name}}</div>
          <div class="font-size24 db-num1" v-show="item.now_count">
            <countTo :startVal='startVal' :endVal='parseInt(item.now_count)' :duration='3000'>
            </countTo>
          </div>
          <div class="font-size12 db-num2">本月累计: {{item.month_count}}</div>
        </li>
      </ul>
      <button type="button" class="div-add" @click="addtarget">
        <i class="iconfont addicon">&#xe623;</i>
      </button>
    </div>
    <!--点击增加指标看板弹窗-->
    <div>
      <el-dialog
        title="新建指标"
        :visible.sync="dialogVisible"
        width="422px"
        @close="close('addform')">
        <el-form :model="addform" ref="addform" :rules="rules">
          <el-row>
            <el-col :span="11" :offset="2">
              <el-form-item prop="value1">
                <el-select v-model="addform.value1" placeholder="请选择">
                  <el-option
                    v-for="elmitem in elm_onelist"
                    :key="elmitem.meta_id"
                    :label="elmitem.colume_chs"
                    :value="elmitem.meta_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <span class="text">的</span>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="value2">
                <el-select class="width100" v-model="addform.value2" placeholder="请选择">
                  <el-option
                    v-for="elmitem in elm_twolist"
                    :key="elmitem.meta_id"
                    :label="elmitem.tgt_name"
                    :value="elmitem.meta_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('addform')" class="dialog-btn">取 消</el-button>
          <el-button type="primary" @click="add('addform')" class="dialog-btn">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import countTo from 'vue-count-to'
  import { Loading } from 'element-ui'
  import { getDateTime } from '../../../../../assets/js/index'
  import ajax from '../../../../../api/ajax/ajax'
  import store from '../../../../../store'
  import api from '../../../../../api/url'
  import Msg from '../../../../../assets/js/msg'

  let kanbanAjax = (vm, val) => {
    // 查询指标看板
    ajax.post(api.SELECTKANBANELEMLIST, {kanban_id: val}).then(res => {
      vm.items = res.data
      if (vm.items.length === 0) {
        store.state.bus.$emit('mountedtgtlistevent', vm.items)
      } else {
        // 查询指标看板数据
        for (let i = 0; i < vm.items.length; i++) {
          vm.showList.push(false)
          const params = {
            from_date: vm.fromDate,
            to_date: vm.toDate,
            kanban_elem_id: vm.items[i].kanban_elem_id
          }
          let loadingInstance = Loading.service({text: '拼命加载中....', target: '.loading' + i})
          ajax.post(api.SELECTANALYSETGT, params).then(data => {
            loadingInstance.close()
            vm.items[i].month_count = data.data.month_count
            vm.items[i].now_count = data.data.now_count
            vm.items[i].tgt_list = data.data.tgt_list
            vm.items[i].set_list = data.data.set_list
            vm.items.splice(i, 1, vm.items[i])
            if (i === 0) {
              store.state.bus.$emit('mountedtgtlistevent', {tgt_list: vm.items[0].tgt_list, set_list: vm.items[0].set_list})
              store.state.bus.$emit('graphtitleevent', vm.items[0].kanban_elem_name)
            }
          })
        }
      }
    })
  }

  export default {
    props: [
      'kanban_id',
      'kanbanList'
    ],
    watch: {
      kanban_id: (val) => {
        kanbanAjax(this, val)
      },
      kanbanList: {
        handler: (arr) => {
          this.kanban_list = arr
        },
        deep: true
      },
      items: (arr) => {
      }
    },
    components: {
      countTo
    },
    data: function () {
      return {
        kanban_list: [],
        startVal: 0,
        dragginglist: [],
        ind: 0,
        radio1: '1',
        radio2: '1',
        dialogVisible: false,
        windows: false,
        valueDate: [],
        time: '',
        meta_id: '',
        colume_chs: '',
        tgt_name: '',
        items: [],
        kanban_elem_name: '',
        timeboardform: {},
        showList: [],
        elm_onelist: [],
        elm_twolist: [],
        fromDate: '',
        toDate: '',
        elmborder: 0,
        addform: {
        },
        rules: {
          value1: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          value2: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    methods: {
      // 关闭
      close (formName) {
        this.dialogVisible = false
        // this.$refs[formName].resetFields()
        // this.$refs.addform.clearValidate()
      },
      // 点击添加指标
      addtarget () {
        if (this.kanban_list.length === 0) {
          Msg.alert('请新增看板')
          return
        }
        this.addform = {}
        this.dialogVisible = true
      },
      // 查询指标元素定义
      querytgt (val) {
        kanbanAjax(this, val)
      },
      elmboard (index) {
        this.elmborder = index
        store.state.bus.$emit('mountedtgtlistevent', {tgt_list: this.items[index].tgt_list, set_list: this.items[index].set_list})
        store.state.bus.$emit('graphtitleevent', this.items[index].kanban_elem_name)
      },
      // 新增指标看板
      add (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const SELECTELEMData = {
              message_content: `${this.addform.value1}__${this.addform.value2}`,
              kanban_id: this.kanban_id
            }
            ajax.post(api.INSERTKANBANELEMLIST, SELECTELEMData).then((res) => {
              this.$refs.addform.clearValidate()
              this.items.push({
                item: null
              })
              // 新增指标看板后查询更新
              ajax.post(api.SELECTKANBANELEMLIST, {kanban_id: this.kanban_id}).then((res) => {
                this.items = res.data
              })
              kanbanAjax(this, this.kanban_id)
            })
            this.dialogVisible = false
            this.$refs.addform.clearValidate()
          } else {
            return false
          }
        })
      },
      // 删除指标看板
      remove (item) {
        var i = this.items.indexOf(item)
        const DeleteData = {
          kanban_elem_id: item.kanban_elem_id,
          is_invalid: 'no'
        }
        this.items.splice(i, 1)
        ajax.post(api.DELETEKANBANELEMLIST, DeleteData).then((res) => {
          this.$parent.querytargetdraglist()
          kanbanAjax(this, this.kanban_id)
        })
      },
      show (index) {
        this.showList.splice(index, 1, true)
      },
      hide (index) {
        this.showList.splice(index, 1, false)
      },
      dateflush (list) {
        this.time = getDateTime(new Date(), 'ss')
        let arr = []
        if (list) {
          list.forEach((item, index) => {
            arr[index] = getDateTime(item, 's')
          })
        }
        this.fromDate = arr[0]
        this.toDate = arr[1]
        kanbanAjax(this, this.kanban_id)
      }
    },
    created () {
      this.valueDate[0] = new Date()
      this.valueDate[1] = new Date()
      this.fromDate = getDateTime(this.valueDate[0], 's')
      this.toDate = getDateTime(this.valueDate[1], 's')
      this.time = getDateTime(new Date(), 'ss')
      this.elm_onelist = JSON.parse(sessionStorage.getItem('commonData')).META_COLUME
      this.elm_twolist = JSON.parse(sessionStorage.getItem('commonData')).META_TGT
      for (let i = 0; i < this.items.length; i++) {
        this.showList[i] = false
      }
      // 拖动开始
      this.$dragging.$on('dragged', ({ value }) => {
        this.dragginglist = value.list
      })
      // 拖动结束
      this.$dragging.$on('dragend', ({ value }) => {
        for (let i = 0; i < this.dragginglist.length; i++) {
          this.dragginglist[i].kanban_elem_serial = i
        }
        // 保存拖动后的序号
        ajax.post(api.UPDATE_KANBAN_ELEMORDER, this.dragginglist).then((res) => {})
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .is-fullscreen
    display none
  #board-content
    .content-one
      margin-bottom 20px
      .el-input__inner
        width 370px
        height 35px
        margin-top 20px
        padding 0px
        .el-range__icon
          font-size: 11px
          margin-left 0px
          padding-left 10px
        .el-range-input
          font-size 12px
          width 35%
          height 30px
        .el-range-separator
          padding 0
      .time
        width 270px
        height 20px
        margin-top 25px
        font-size 14px
    .container-fluid
      display flex
      flex-flow wrap
      align-content: flex-start
      .div_list
        box-sizing border-box
        background-color white
        flex 0 0 18%
        min-width 18%
        min-height 140px
        margin 1%
        border 1px solid #D8DCE5
        cursor pointer
      .active
        border 1px solid #016DFB
    .databoard
      width 70%
      height 110px
      margin auto
      margin-top 20px
    .db-title
      font-size 12px
      color #5A5E66
      width 100%
      text-align center
    .db-num1
      width 100%
      height 30px
      font-size 24px
      color #5A5E66
      text-align center
      margin-bottom 20px
    .db-num2
      font-size 12px
      color #B4BCCC
      text-align center
    .div-add
      box-sizing border-box
      background-color white
      flex 0 0 18%
      min-width 18%
      min-height 140px
      margin 1%
      border 1px solid #D8DCE5
    .addicon
      font-size 31px
      color #B4BCCC
    .float-right
      float right
    .float-left
      float left
    .amelita-btn
      width 25px
      height 20px
      border none
      color #B4BCCC
      background none
      font-size 10px
      float right
    .el-row
      margin-bottom 20px
      &:last-child
        margin-bottom 0
      .el-col-11
        .el-form-item
          .el-form-item__content
            .el-select
              margin 0
      .el-col-2
        height 40px
        line-height 40px
        text-align center
    .dialog-btn
      width 86px
      height 30px
      line-height 6px
</style>
